<!--
 * @Description: 取消结算查询页面
 * @Autor: 何兴家
 * @Date: 2021-01-14 16:00:28
 * @LastEditors: 何兴家
 * @LastEditTime: 2021-02-22 16:19:21
-->
<template>
  <div>
    <div class="type-box">
      <el-radio-group v-model="activeRadio">
        <el-radio-button label="Order">维修工单</el-radio-button>
        <el-radio-button label="Part">配件销售单</el-radio-button>
      </el-radio-group>
    </div>
    <!-- 维修工单 -->
    <div v-show="activeRadio == 'Order'">
      <TopFilter ref="orderFilter" :list="orderFilterList" :collapse="false" :cols="4" :labelWidth="110" @filterChange="handleOrderSearch"></TopFilter>
      <FilterTable
        ref="orderTable"
        columnsRef="repair_repairReception_cancelfeesSettlement_index_order"
        :columns="orderColumns"
        :fetchapi="orderFetchApi"
        :params="orderFetchParams"
        :isExportExcel="true"
        :isSelectColumn="false"
        selectionType="single"
        :datakey="'rows'"
        :onColumnsChange="columns => (this.orderColumns = columns)"
        :onRowSelectChange="columns => (this.selectedOrderRow = columns)"
      >
      </FilterTable>
    </div>

    <!-- 配件销售单 -->
    <div v-show="activeRadio == 'Part'">
      <TopFilter ref="partFilter" :list="partFilterList" :collapse="false" :cols="4" :labelWidth="110" @filterChange="handlePartSearch"></TopFilter>
      <FilterTable
        ref="partTable"
        columnsRef="repair_repairReception_feesSettlement_index_part"
        :columns="partColumns"
        :fetchapi="partFetchApi"
        :params="partFetchParams"
        :isExportExcel="true"
        :isSelectColumn="false"
        selectionType="single"
        :datakey="'rows'"
        :onColumnsChange="columns => (this.partColumns = columns)"
        :onRowSelectChange="columns => (this.selectedPartRow = columns)"
      >
      </FilterTable>
    </div>

    <!-- 结算单详情 -->
    <Drawer :visible.sync="showPanel" title="取消结算" destroyOnClose width="100%" :closable="false">
      <cancelBalanceDetail :orderDetail="inViewOrder" :defaultOrderType="defaultOrderType" :defaultPageType="defaultPageType" @refeshTable="handleRefeshTable" @close="showPanel = false" />
    </Drawer>
  </div>
</template>

<script>
import moment from 'moment';
import { dictionary } from '@/utils/dictMixin';
import { confirmAction, notifyAction, findFormItem, findTableItem, jsonToHump } from '@/utils';
import { getUserId } from '@/assets/js/auth';
import dictCode from '@/utils/dictCode';

import cancelBalanceDetail from './cancelBalanceDetail';

import { queryCancelSettlement } from '@/api/repair/repairReception/cancelFeeSettlement';
import { getWxlxSelect } from '@/api/repair/repairReception/customer';
import { searchRoleByCode } from '@/api/common/empSelect/index';
import { getDealerUser } from '@/api/repair/common';
import { findAllRepair } from '@/api/repair/basicParameters';

export default {
  mixins: [dictionary],
  components: { cancelBalanceDetail },
  data() {
    this.selectedOrderRow = [];
    this.selectedPartRow = [];
    this.inViewOrder = {}; // 查看/编辑中的单据信息
    return {
      activeRadio: 'Order', // 激活的radio类型
      orderFilterList: this.createOrderFilterList(),
      partFilterList: this.createPartFilterList(),
      orderColumns: this.createOrderColumns(),
      partColumns: this.createPartColumns(),
      orderFetchApi: queryCancelSettlement,
      partFetchApi: queryCancelSettlement,
      orderFetchParams: { xhrAbort: true, flag: 'RO_NO' },
      partFetchParams: { xhrAbort: true, flag: 'SALES_PART_NO' },
      showPanel: false,
      defaultOrderType: 'repair', // 默认的单据类型 repair/part
      defaultPageType: 'edit' // 详情页默认页面类型
    };
  },
  mounted() {
    this.queryRepairTypeDict();
    this.queryServiceAdviserList();
    this.queryDealerAllUserList();
    this.queryRepairParams();
    // this.showPanel = true;
  },
  methods: {
    createOrderFilterList() {
      return [
        {
          type: 'INPUT',
          label: '工单号',
          fieldName: 'roNo',
          initialValue: ''
        },
        // {
        //   type: 'INPUT',
        //   label: '结算单号',
        //   fieldName: 'ballanceNo'
        // },
        {
          type: 'INPUT',
          label: 'VIN',
          fieldName: 'vin'
        },
        {
          type: 'INPUT',
          label: '车牌号',
          fieldName: 'license'
        },
        {
          type: 'INPUT',
          label: '车主姓名',
          fieldName: 'ownerName'
        },
        {
          type: 'SELECT',
          label: '维修类型',
          fieldName: 'repairTypeCode',
          itemList: []
        },
        {
          type: 'SELECT',
          label: '服务顾问',
          fieldName: 'serviceAdvisor',
          filterable: true,
          itemList: [],
          rules: [{ required: false, message: '请选择服务工程师', trigger: 'change' }]
        },
        // {
        //   type: 'SELECT',
        //   label: '是否被负结算',
        //   fieldName: 'is',
        //   itemList: this.createDictList(1004)
        // },
        {
          type: 'RANGE_DATE',
          label: '开单日期',
          fieldName: 'beginTime|endTime',
          valueFormat: 'yyyy-MM-dd',
          labelOptions: {
            fieldName: 'timeType',
            initialValue: 'completeTime',
            itemList: [
              { text: '开单时间', value: 'roCreateDate' },
              { text: '竣工日期', value: 'completeTime' },
              { text: '结算时间', value: 'beginTime' },
              { text: '结清时间', value: 'endTime' }
            ]
          }
        }
      ];
    },
    createPartFilterList() {
      return [
        {
          type: 'INPUT',
          label: '配件销售单号',
          fieldName: 'salesPartNo',
          initialValue: ''
        },
        // {
        //   type: 'INPUT',
        //   label: '结算单号',
        //   fieldName: 'ballanceNo'
        // },
        // {
        //   type: 'SELECT',
        //   label: '是否被负结算',
        //   fieldName: 'is',
        //   itemList: this.createDictList(1004)
        // },
        {
          type: 'RANGE_DATE',
          label: '开单日期',
          fieldName: 'beginTime|endTime',
          valueFormat: 'yyyy-MM-dd',
          labelOptions: {
            fieldName: 'dateType',
            initialValue: 'createDate',
            itemList: [
              { text: '开单时间', value: 'createDate' }
              // { text: '竣工日期', value: '2' },
              // { text: '结算时间', value: '3' },
              // { text: '结清时间', value: '4' }
            ]
          }
        }
      ];
    },
    createOrderColumns() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 90,
          sorter: true,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '操作',
          dataIndex: 'operation',
          render: props => {
            return (
              <div>
                <el-button
                  type="text"
                  onClick={() => {
                    this.handleViewDetail(props.row, 'repair', 'edit');
                  }}
                >
                  取消结算
                </el-button>
                <el-button
                  type="text"
                  onClick={() => {
                    this.handleViewDetail(props.row, 'repair', 'detail');
                  }}
                >
                  明细
                </el-button>
              </div>
            );
          }
        },
        {
          title: '工单号',
          dataIndex: 'RO_NO',
          width: 150,
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: 'VIN',
          dataIndex: 'VIN',
          width: 150,
          sorter: true,
          filter: true,
          filterType: 'input',
          showOverflowTooltip: true
        },
        {
          title: '车牌号',
          dataIndex: 'LICENSE',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '品牌',
          dataIndex: 'BRAND',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '车系',
          dataIndex: 'SERIES',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '车型',
          dataIndex: 'MODEL',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '维修类型',
          dataIndex: 'REPAIR_TYPE_CODE',
          width: 150,
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '服务顾问',
          dataIndex: 'SERVICE_ADVISOR',
          width: 150,
          sorter: true,
          filter: true,
          filterType: 'checkbox',
          filterItems: [],
          dictItems: []
        },
        // {
        //   title: '锁定人',
        //   dataIndex: 'LOCK_NAME',
        //   width: 150,
        //   sorter: true,
        //   filter: true,
        //   filterType: 'input'
        // },
        {
          title: '开单日期',
          dataIndex: 'RO_CREATE_DATE',
          width: 150,
          sorter: true,
          filter: true,
          filterType: 'date-range'
        },
        {
          title: '指定技师',
          dataIndex: 'CHIEF_TECHNICIAN',
          sorter: true,
          filter: true,
          filterType: 'checkbox',
          filterItems: [],
          dictItems: []
        },
        {
          title: '预交车时间',
          dataIndex: 'END_TIME_SUPPOSED',
          width: 150,
          sorter: true,
          filter: true,
          filterType: 'date-range',
          showOverflowTooltip: true
        },
        {
          title: '试车员',
          dataIndex: 'TEST_DRIVER',
          sorter: true,
          filter: true,
          filterType: 'checkbox',
          filterItems: [],
          dictItems: []
        },
        {
          title: '车主',
          dataIndex: 'OWNER_NAME',
          width: 150,
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '送修人',
          dataIndex: 'DELIVERER',
          width: 150,
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '送修人电话',
          dataIndex: 'DELIVERER_MOBILE',
          width: 150,
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '送修人手机',
          dataIndex: 'DELIVERER_PHONE',
          width: 150,
          sorter: true,
          filter: true,
          filterType: 'input'
        }
      ];
    },
    createPartColumns() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 90,
          sorter: true,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '操作',
          dataIndex: 'operation',
          render: props => {
            return (
              <div>
                <el-button
                  type="text"
                  onClick={() => {
                    this.handleViewDetail(props.row, 'part', 'edit');
                  }}
                >
                  取消结算
                </el-button>
                <el-button
                  type="text"
                  onClick={() => {
                    this.handleViewDetail(props.row, 'part', 'detail');
                  }}
                >
                  明细
                </el-button>
              </div>
            );
          }
        },
        {
          title: '配件销售单号',
          dataIndex: 'SALES_PART_NO',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '客户姓名',
          dataIndex: 'CUSTOMER_NAME',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '销售材料费',
          dataIndex: 'SALES_PART_AMOUNT',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        // {
        //   title: '锁定人',
        //   dataIndex: 'LOCK_USER',
        //   sorter: true,
        //   filter: true,
        //   filterType: 'input'
        // },
        {
          title: '开单日期',
          dataIndex: 'CREATED_AT',
          sorter: true,
          filter: true,
          filterType: 'date-range'
        }
        // {
        //   title: '结算日期',
        //   dataIndex: 'BALLANCE_DATE',
        //   sorter: true,
        //   filter: true,
        //   filterType: 'date-range'
        // }
      ];
    },

    // 维修工单点击搜索
    handleOrderSearch(e) {
      this.orderFetchParams = Object.assign({}, this.orderFetchParams, e, { xhrAbort: false });
    },
    // 配件销售单点击搜索
    handlePartSearch(e) {
      e.endTime && (e.endTime = e.endTime.split(' ')[0] + ' 23:59:59');
      this.partFetchParams = Object.assign({}, this.partFetchParams, e, { xhrAbort: false });
    },
    //
    // 获取维修类型
    async queryRepairTypeDict() {
      let res = await getWxlxSelect();
      if (res.resultCode == 200) {
        this.repairTypeList = res.data;
        let repairTypeDict = res.data.map(item => ({ text: item.REPAIR_TYPE_NAME, value: item.REPAIR_TYPE_CODE + '' }));
        findFormItem(this.orderFilterList, 'repairTypeCode').itemList = repairTypeDict;
        findTableItem(this.orderColumns, 'REPAIR_TYPE_CODE').dictItems = repairTypeDict;
      }
    },
    // 获取服务顾问列表
    async queryServiceAdviserList() {
      let serviceConsultant = { role: dictCode.SERVICE_CONSULTANT };
      let res = await searchRoleByCode(serviceConsultant);
      if (res.resultCode == 200) {
        let serviceAdviserDict = res.data.map(item => ({ text: item.employeeName, value: item.userId + '' }));
        findFormItem(this.orderFilterList, 'serviceAdvisor').itemList = serviceAdviserDict;
        let tableTaeget = findTableItem(this.orderColumns, 'SERVICE_ADVISOR');
        tableTaeget.dictItems = tableTaeget.filterItems = serviceAdviserDict;
      }
    },
    // 获取经销商全部人员列表
    async queryDealerAllUserList() {
      let res = await getDealerUser();
      if (res.resultCode == 200) {
        let userDicts = res.data.map(item => ({ text: item.employeeName, value: item.userId + '' }));
        let tableTaeget = [findTableItem(this.orderColumns, 'TEST_DRIVER'), findTableItem(this.orderColumns, 'CHIEF_TECHNICIAN')];
        tableTaeget.forEach(item => {
          item.dictItems = item.filterItems = userDicts;
        });
      }
    },
    // 查询服务参数(元整信息提前储存)
    async queryRepairParams() {
      let res = await findAllRepair();
      sessionStorage.setItem('precision', res.data['8011']);
      sessionStorage.setItem('settlementType', res.data['1009']);
    },

    // 吊起详情页面
    handleViewDetail(row, orderType, pageType) {
      this.inViewOrder = row;
      this.defaultOrderType = orderType;
      this.defaultPageType = pageType;
      this.showPanel = true;
    },
    // 刷新列表数据
    async handleRefeshTable() {
      if (this.activeRadio == 'Order') {
        let formData = await this.$refs.orderFilter.GET_FORM_DATA();
        this.handleOrderSearch(formData[1]);
      } else {
        let formData = await this.$refs.partFilter.GET_FORM_DATA();
        this.handlePartSearch(formData[1]);
      }
    }
  }
};
</script>

<style lang="less">
.type-box {
  padding-bottom: 15px;
  padding-left: 80px;
  background: #fff;
}
</style>
